<template>
    <!-- 表格数据 -->
    <v-data-table :headers="headers" :items="desserts" class="elevation-1" v-model="selected" show-select>
        <!-- 顶部插槽 -->
        <template v-slot:top>
            <!-- 顶部导航渔区 -->
            <v-toolbar flat>
                <!-- 标题 -->
                <v-toolbar-title>测试用例</v-toolbar-title>
                <!-- 垂直分割线 -->
                <v-divider class="mx-4" inset vertical></v-divider>
                <!-- 占满剩余空间 -->
                <v-spacer></v-spacer>
                <!-- 创建计划弹框 -->
                <v-dialog v-model="dialogPlan" max-width="500px">
                    <!-- 右侧按钮区域 -->
                    <template v-slot:activator="{ on, attrs }">
                        <v-btn color="green" dark class="mb-2 mr-2" v-bind="attrs" v-on="on">
                            创建计划
                        </v-btn>
                    </template>
                    <!-- 创建计划卡片 -->
                    <v-card>
                        <!-- 卡片标题 -->
                        <v-card-title>
                            <span class="text-h5">创建计划</span>
                        </v-card-title>

                        <!-- 卡片内容 -->
                        <v-card-text>
                            <v-container>
                                <!-- 表单输入框 -->
                                <v-text-field v-model="planName" label="测试计划名称"></v-text-field>
                            </v-container>
                        </v-card-text>

                        <!-- 弹框操作 -->
                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn color="blue darken-1" text @click="savePlan">
                                保存
                            </v-btn>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
                <!-- 新增修改弹框 -->
                <v-dialog v-model="dialog" max-width="500px">
                    <!-- 右侧按钮区域 -->
                    <template v-slot:activator="{ on, attrs }">
                        <v-btn color="primary" dark class="mb-2" v-bind="attrs" v-on="on">
                            创建用例
                        </v-btn>
                    </template>
                    <!-- 新增修改卡片 -->
                    <v-card>
                        <!-- 卡片标题 -->
                        <v-card-title>
                            <span class="text-h5">{{ formTitle }}</span>
                        </v-card-title>

                        <!-- 卡片内容 -->
                        <v-card-text>
                            <v-container>
                                <!-- 表单输入框 -->
                                <v-text-field disabled v-if="editedItem.id" v-model="editedItem.id"
                                    label="用例id"></v-text-field>
                                <v-text-field v-model="editedItem.name" label="用例名称"></v-text-field>
                                <v-text-field v-model="editedItem.step" label="用例步骤"></v-text-field>
                                <v-text-field v-model="editedItem.method" label="用例方法"></v-text-field>
                                <v-text-field v-model="editedItem.remark" label="备注"></v-text-field>
                            </v-container>
                        </v-card-text>

                        <!-- 弹框操作 -->
                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn color="blue darken-1" text @click="close">
                                取消
                            </v-btn>
                            <v-btn color="blue darken-1" text @click="save">
                                保存
                            </v-btn>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
                <!-- 删除弹框 -->
                <v-dialog v-model="dialogDelete" max-width="500px">
                    <v-card>
                        <v-card-title class="text-h5">确定删除用例?</v-card-title>
                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn color="blue darken-1" text @click="closeDelete">取消</v-btn>
                            <v-btn color="blue darken-1" text @click="deleteItemConfirm">确定</v-btn>
                            <v-spacer></v-spacer>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
            </v-toolbar>
        </template>
        <!-- 操作列插槽 -->
        <template v-slot:item.actions="{ item }">
            <!-- 修改 -->
            <v-icon small class="mr-2" @click="editItem(item)">
                mdi-pencil
            </v-icon>
            <!-- 删除 -->
            <v-icon small @click="deleteItem(item)">
                mdi-delete
            </v-icon>
        </template>
    </v-data-table>
</template>

<script>
export default {
    data: () => ({
        // 新增修改弹框是否展示
        dialog: false,
        // 删除弹框是否展示
        dialogDelete: false,
        // 测试计划弹框是否展示
        dialogPlan: false,
        // 测试计划名称
        planName: '',
        // 勾选的用例
        selected: [],
        // 表头
        headers: [
            { text: '用例Id', align: 'start', sortable: false, value: 'id' },
            { text: '用例名称', value: 'name' },
            { text: '用例步骤', value: 'step' },
            { text: '用例方法', value: 'method' },
            { text: '备注', value: 'remark' },
            { text: '操作', value: 'actions', sortable: false },
        ],
        // 数据源
        desserts: [],
        // 弹框类型
        editedIndex: -1,
        // 修改表单数据
        editedItem: {
            id: '',
            name: '',
            step: '',
            method: '',
            remark: '',
        },
        // 默认表单数据
        defaultItem: {
            id: '',
            name: '',
            step: '',
            method: '',
            remark: '',
        },
    }),

    // 计算属性
    computed: {
        formTitle() {
            // 三元表达式返回弹框标题
            return this.editedIndex === -1 ? '新增用例' : '修改用例'
        },
    },

    // 侦听器
    watch: {
        // 侦听新增修改弹框，val为真时展开弹框，否则关闭
        dialog(val) {
            val || this.close()
        },
        // 侦听修改弹框，val为真时展开弹框，否则关闭
        dialogDelete(val) {
            val || this.closeDelete()
        },
    },

    // 生命周期函数
    created() {
        this.initData()
    },

    // 方法
    methods: {
        // 初始化数据
        initData() {
            console.log('initData')
            this.$api.testcase.getTestcase().then((result) => {
                // 将接口返回数据赋值给表格
                this.desserts = result.data.data
            }).catch((err) => {
                console.log('err', err)
            })
        },

        // 修改列表项
        editItem(item) {
            this.editedIndex = this.desserts.indexOf(item)
            this.editedItem = Object.assign({}, item)
            this.dialog = true
        },

        // 删除列表项
        deleteItem(item) {
            this.editedIndex = this.desserts.indexOf(item)
            this.editedItem = Object.assign({}, item)
            this.dialogDelete = true
        },

        // 删除弹框确认操作
        deleteItemConfirm() {
            this.$api.testcase.deleteTestcase({ 'id': this.editedItem.id }).then((result) => {
                // 删除成功时，发起初始化数据操作
                if (result.data.code == 0) {
                    this.initData()
                }
            }).catch((err) => {
                console.log('err', err)
            })
            this.closeDelete()
        },

        // 关闭新增修改用例弹框
        close() {
            this.dialog = false
            // 等待Vue实例更新视图后再执行
            // 使用this.$nextTick方法是有效处理Vue组件中DOM更新后的操作的一种方式
            // 例如获取更新后的DOM元素的尺寸、操作更新后的DOM节点等
            this.$nextTick(() => {
                this.editedItem = Object.assign({}, this.defaultItem)
                this.editedIndex = -1
            })
        },

        // 关闭删除用例弹框
        closeDelete() {
            this.dialogDelete = false
            this.$nextTick(() => {
                this.editedItem = Object.assign({}, this.defaultItem)
                this.editedIndex = -1
            })
        },

        // 保存操作
        save() {
            if (this.editedIndex > -1) {
                // 编辑操作
                this.$api.testcase.updateTestcase(this.editedItem).then((result) => {
                    // 修改成功时，发起初始化数据操作
                    if (result.data.code == 0) {
                        this.initData()
                    }
                }).catch((err) => {
                    console.log('err', err)
                })
            } else {
                // 新增操作
                // 解构复制获取除id之外的数据
                const { id, ...newEditedItem } = this.editedItem
                this.$api.testcase.addTestcase(newEditedItem).then((result) => {
                    // 新增成功时，发起初始化数据操作
                    if (result.data.code == 0) {
                        this.initData()
                    }
                }).catch((err) => {
                    console.log('err', err)
                })
            }
            this.close()
        },

        // 创建测试计划
        savePlan() {
            console.log('planName', this.planName)
            console.log('selected', this.selected)
            // this.selected是完整的测试用例列表，接口只需要id列表
            const idList = this.selected.map((item) => item.id)
            // 测试计划新增
            this.$api.plan.addPlan({ 'name': this.planName, 'testcase_ids': idList }).then((result) => {
                console.log('result', result.data)
            }).catch((err) => {
                console.log('err', err)
            })
            // 新增完成之后需要初始化
            this.planName = ''
            this.selected = []
            this.dialogPlan = false
        }
    },
}
</script>